
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
                    
                <li>
                <i class="icon iconfont icon-gou"></i>
                    <div class="name">勾</div>
                    <div class="fontclass">.icon-gou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhinan"></i>
                    <div class="name">指南</div>
                    <div class="fontclass">.icon-zhinan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quedingfangan"></i>
                    <div class="name">确定方案</div>
                    <div class="fontclass">.icon-quedingfangan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-calculator"></i>
                    <div class="name">计算器</div>
                    <div class="fontclass">.icon-calculator</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shigong"></i>
                    <div class="name">施工</div>
                    <div class="fontclass">.icon-shigong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baozhang"></i>
                    <div class="name">保障</div>
                    <div class="fontclass">.icon-baozhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou4-copy-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou4-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanzhengma"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.icon-yanzhengma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-next-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoguotu"></i>
                    <div class="name">效果图</div>
                    <div class="fontclass">.icon-xiaoguotu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoti"></i>
                    <div class="name">标题</div>
                    <div class="fontclass">.icon-biaoti</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangcheng"></i>
                    <div class="name">商城</div>
                    <div class="fontclass">.icon-shangcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaotiyou"></i>
                    <div class="name">标题右</div>
                    <div class="fontclass">.icon-biaotiyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaotizuo"></i>
                    <div class="name">标题左</div>
                    <div class="fontclass">.icon-biaotizuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lunbo"></i>
                    <div class="name">轮播</div>
                    <div class="fontclass">.icon-lunbo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jungongyanshou"></i>
                    <div class="name">竣工验收</div>
                    <div class="fontclass">.icon-jungongyanshou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghao"></i>
                    <div class="name">账号 (1)</div>
                    <div class="fontclass">.icon-zhanghao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chengxinyonghushenqing"></i>
                    <div class="name">诚信用户申请</div>
                    <div class="fontclass">.icon-chengxinyonghushenqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-woyaohuida"></i>
                    <div class="name">我要回答</div>
                    <div class="fontclass">.icon-woyaohuida</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei-copy"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-celan-qiyemingcheng-wanchengshimingjirenzhengeps"></i>
                    <div class="name">侧栏-企业名称-完成实名及认证.eps</div>
                    <div class="fontclass">.icon-celan-qiyemingcheng-wanchengshimingjirenzhengeps</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tool"></i>
                    <div class="name">工具</div>
                    <div class="fontclass">.icon-tool</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingxing"></i>
                    <div class="name">星星</div>
                    <div class="fontclass">.icon-xingxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenda_woyaotiwen"></i>
                    <div class="name">问答_我要提问42*42</div>
                    <div class="fontclass">.icon-wenda_woyaotiwen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou1"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouhoufuwu"></i>
                    <div class="name">售后服务</div>
                    <div class="fontclass">.icon-shouhoufuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-title"></i>
                    <div class="name">标题</div>
                    <div class="fontclass">.icon-title</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shimingrenzheng"></i>
                    <div class="name">实名认证</div>
                    <div class="fontclass">.icon-shimingrenzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoti2"></i>
                    <div class="name">标题</div>
                    <div class="fontclass">.icon-biaoti2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-us_M"></i>
                    <div class="name">了解我们_M</div>
                    <div class="fontclass">.icon-us_M</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lunbo1"></i>
                    <div class="name">轮播</div>
                    <div class="fontclass">.icon-lunbo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zaixianwenda"></i>
                    <div class="name">在线问答</div>
                    <div class="fontclass">.icon-zaixianwenda</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shimingrenzheng1"></i>
                    <div class="name">实名认证</div>
                    <div class="fontclass">.icon-shimingrenzheng1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zaixianyuyue"></i>
                    <div class="name">在线预约</div>
                    <div class="fontclass">.icon-zaixianyuyue</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lingjuan"></i>
                    <div class="name">领劵</div>
                    <div class="fontclass">.icon-lingjuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liangfang"></i>
                    <div class="name">量房</div>
                    <div class="fontclass">.icon-liangfang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingming"></i>
                    <div class="name">姓名</div>
                    <div class="fontclass">.icon-xingming</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziyuan"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-ziyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou2"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-toutiao"></i>
                    <div class="name">头条</div>
                    <div class="fontclass">.icon-toutiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiang"></i>
                    <div class="name">长箭头</div>
                    <div class="fontclass">.icon-jiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiandinghetong"></i>
                    <div class="name">签订合同</div>
                    <div class="fontclass">.icon-qiandinghetong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yunsheji"></i>
                    <div class="name">云设计</div>
                    <div class="fontclass">.icon-yunsheji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhuihuodong"></i>
                    <div class="name">优惠活动</div>
                    <div class="fontclass">.icon-youhuihuodong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhucechenggong"></i>
                    <div class="name">注册成功</div>
                    <div class="fontclass">.icon-zhucechenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiao-xiaohong_shuqian"></i>
                    <div class="name">图标-小红_书签</div>
                    <div class="fontclass">.icon-tubiao-xiaohong_shuqian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-up"></i>
                    <div class="name">长箭头</div>
                    <div class="fontclass">.icon-up</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
